<template>
    <div class="Manage">
        <Header :zIndex="3" ref="Header"></Header>
        <div class="content-wrap">
        <center>
            <div class="top">
            <ul class="daohang_list">
                <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
                <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
            </ul>
            </div>
            <div class="info_box">
                <div class="left">
                    <div class="grzl">个人中心</div>
                    <ul class="nav_child">
                    <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                    <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                    <li><router-link  :to="{path: '/Address'}">收件地址</router-link></li>
                    <li><router-link class="on" :to="{path: '/Invoice'}">发票信息</router-link></li>
                    <li><router-link :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                    <li><router-link :to="{path: '/DrawList'}">提现记录</router-link></li>
                    <li><router-link :to="{ path: '/Logs' }">消费记录</router-link></li>
                    <li><router-link :to="{ path: '/Editpass' }">修改密码</router-link></li>
                    </ul>
                </div>
                <!-- 发票信息 -->
                <div class="iinforignt">
                    <div style="margin:20px auto;width:80%;text-align:left">
                        <el-alert title="提示：暂时不支持开具“增值税专用发票”" :closable="false" style="margin-bottom:20px;" type="warning" show-icon></el-alert>
                        <el-form ref="invoice_form" :model="invoice" :rules="rules" label-width="120px" label-position="right">
                          <el-form-item label="抬头类型" prop="corpType">
                              <el-radio-group v-model="invoice.corpType" @change="corpTypeChange">
                                <el-radio :label="1">个人</el-radio>
                                <el-radio :label="2">企业</el-radio>
                                <el-radio :label="3">
                                    组织
                                    <el-tooltip popper-class="tips" effect="dark" content="其他组织（如政府、公共事业、非盈利机构等）" placement="top">
                                        <i class="el-icon-question icon"></i>
                                    </el-tooltip>
                                </el-radio>
                              </el-radio-group>
                          </el-form-item>
                          <el-form-item label="发票类型" prop="type">
                              <el-radio-group v-model="invoice.type">
                                <el-radio :label="1">增值税普通发票</el-radio>
                                <el-radio :disabled="true" :label="2">增值税专用发票
                                    <el-tooltip popper-class="tips" effect="dark" placement="top">
                                        <div slot="content">
                                            若具备<span class="color_ry">一般纳税人资质，需要进行进项税抵扣</span>，请选择<br>
                                            抬头类型为<span class="color_ry">企业</span>，发票类型为<span class="color_ry">增值税专用发票</span>。建议联系
                                            <br>贵司财务确认开票类型后再申请开票。
                                        </div>
                                        <i class="el-icon-question icon"></i>
                                    </el-tooltip>
                                </el-radio>
                              </el-radio-group>
                          </el-form-item>
                          <el-form-item label="发票抬头" prop="corpName">
                              <el-input v-model="invoice.corpName" placeholder="请填写发票抬头" maxlength="50" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item label="纳税人识别号" prop="taxpayerId" v-if="invoice.corpType>1">
                              <el-input v-model="invoice.taxpayerId" placeholder="请填写纳税人识别号" maxlength="20" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item label="基本开户银行" prop="bankName" v-if="invoice.corpType==2">
                              <el-input v-model="invoice.bankName" placeholder="请填写开户银行名称" maxlength="100" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item label="基本开户账号" prop="bankNo" v-if="invoice.corpType==2">
                              <el-input v-model="invoice.bankNo" placeholder="请填写开户银行账号" maxlength="50" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item label="企业注册地址" prop="address" v-if="invoice.corpType==2">
                              <el-input v-model="invoice.address" placeholder="请填写企业注册地址" maxlength="200" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item label="企业注册电话" prop="corpTel" v-if="invoice.corpType==2">
                              <el-input v-model="invoice.corpTel" placeholder="请填写企业注册电话" maxlength="50" style="width:60%"></el-input>
                          </el-form-item>
                          <el-form-item>
                              <el-button icon="fa fa-save" type="primary" @click="update">保存</el-button>
                          </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </center>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import User from '../../utils/user'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'

export default {
    name:'Invoice',
    components: {
        Header,
        Footer
    },
    data(){
        var validTaxpayerId = (rule, value, callback) => {
            if(value == '') {
                return callback(new Error('请填写纳税人识别号'));
            }
            var len = value.length;
            if(len != 15 && len != 17 && len != 18 && len != 20) {
                return callback(new Error('请输入15位, 17位, 18位或20位真实有效的纳税人识别号'));
            }
            callback();
        };
        return {
            invoice:{
                type:2,
                corpName: '',
                taxpayerId: '',
                address: '',
                corpTel:'',
                bankName: '',
                bankNo: '',
                corpType: ''
            },
            tempName: '',
            rules:{
                corpType:[
                   { required: true, message: '请选择抬头类型', trigger: 'blur'}
                ],
                type:[
                    { required: true, message: '请选择发票类型', trigger: 'blur'}
                ],
                corpName:[
                    { required: true, message: '请填写发票抬头', trigger: 'blur'}
                ],
                taxpayerId:[
                    { required: true, message: '请填写纳税人识别号', trigger: 'blur'},
                    { validator: validTaxpayerId, trigger: 'blur'}
                ],
                bankName:[
                    {required: true, message: '请填写开户银行名称', trigger: 'blur'}
                ],
                bankNo: [
                    {required: true, message: '请填写开户银行账号', trigger: 'blur'}
                ],
                address:[
                    {required: true, message: '请填写企业注册地址', trigger: 'blur'}
                ],
                corpTel:[
                    {required: true, message: '请填写企业注册电话', trigger: 'blur'}
                ]
            }
        }
    },
    created(){
        if(!User.getToken() || !User.getInfo()) {
            this.$router.replace('/Login');
            return;
        }
        this.setTitle('发票信息');
        this.loadInfo();
    },
    methods: {
        loadInfo(){
            Ajax.get('member/invoice').then(res=>{
                if(res.code == 0){
                    this.invoice = res.data;
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                console.error(err);
                this.$alert('获取数据失败');
            })
        }, 
        update(){
            const that = this;
            this.$refs["invoice_form"].validate((valid) => {
                console.log(valid);
                if(valid){
                    var len = that.invoice.taxpayerId.length;
                    if(len != 15 && len != 17 && len !=18 && len != 20) {
                        
                        return false;
                    }
                    //提交
                    Ajax.post('member/update/invoice', this.invoice).then(res=>{
                        if(res.code == 0) {
                            this.$alert('保存成功');
                        } else{
                            this.$alert(res.msg);
                        }
                    }).catch(err=>{
                        console.error(err);
                        this.$alert('保存失败，网络错误');
                    })
                }
                return false;
            });
        },
        corpTypeChange(){
            if(this.invoice.corpType != 2) {
                this.invoice.type = 1;
            }
            var isCorp = false, isGroup = false;
            if(this.invoice.corpType == 1) {
                this.tempName = this.invoice.corpName;
                this.invoice.corpName = '个人';
            } else {
                this.invoice.corpName = this.tempName;
                isCorp = this.invoice.corpType == 2;
                isGroup = this.invoice.corpType == 3;
            }
            this.rules.taxpayerId[0].required = isCorp || isGroup;
            this.rules.bankName[0].required = isCorp;
            this.rules.bankNo[0].required = isCorp;
            this.rules.address[0].required = isCorp;
            this.rules.corpTel[0].required = isCorp;
        }
    }
}
</script>
<style scope>
.tools {
    vertical-align: middle;
}
.tools .el-tag {
    margin-top:5px;
}
.tools .btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}
.tools .btns .el-button--text {
    margin-left:10px;
}
.tools .btns .el-button--text,
.tools .btns .el-button--text:hover {
    border:none;
    background:none;
}
.icon {
    font-size:16px !important;
}
.tips {
    background-color:#fff;
    color:#333;
}
.color_ry {
    color:#f52;
}
.fa {
    margin-right:5px;
}
</style>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
